.bounce-enter-active {
    animation: bounce-in 0.5s;
  }
  .bounce-leave-active {
    animation: bounce-in 0.5s reverse;
  }
  @keyframes bounce-in {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  .spinner {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .spinner > .ani {
    display: flex;
  }
  
  .spinner > .ani > div {
    width: 30px;
    height: 30px;
    background-color: #42dbff;
  
    border-radius: 50%;
  
    animation: bouncedelay 2s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    animation-fill-mode: both;
  }
  
  .spinner > .ani > .bounce1 {
    animation-delay: -0.7s;
  }
  
  .spinner > .ani > .bounce2 {
    animation-delay: -0.35s;
  }
  
  @keyframes bouncedelay {
    0%,
    80%,
    100% {
      transform: scale(0);
    }
  
    40% {
      transform: scale(1);
    }
  }